<template>
  <div class="bpl1-bg">
    <div class="co-bz-content">
      <div class="bz-title">
        <div class="left com-title-style">
          <div class="name">按行政审批处</div>
          <div class="icon">
            <img src="@/assets/cockpit/subdivision/approve/item1-title-icon.png" alt="" />
          </div>
        </div>
        <!-- <div class="right">单位：个</div> -->
      </div>
    </div>

    <div class="bb4-main">
      <ul class="bb4-list">
        <li class="bb4-l-each">
          <div class="bb4-le-sup bb4-le-sup1">受理量</div>
          <div class="bb4-le-sub bb4-le-sub1">
            <div class="bb4-leb-light"></div>
            <div class="bb4-leb-tri"></div>
            <div class="bb4-leb-word">
              <p>{{ totalObject.acceptnum }}</p>
            </div>
          </div>
        </li>
        <li class="bb4-l-each">
          <div class="bb4-le-sup bb4-le-sup1">办结量</div>
          <div class="bb4-le-sub bb4-le-sub1">
            <div class="bb4-leb-light"></div>
            <div class="bb4-leb-tri"></div>
            <div class="bb4-leb-word">
              <p>{{ totalObject.finishnum }}</p>
            </div>
          </div>
        </li>
        <li class="bb4-l-each">
          <div class="bb4-le-sup bb4-le-sup2">办结率</div>
          <div class="bb4-le-sub bb4-le-sub3">
            <div class="bb4-leb-light"></div>
            <div class="bb4-leb-tri"></div>
            <div class="bb4-leb-word">
              <p>{{ totalObject.finishrate }}%</p>
            </div>
          </div>
        </li>
        <li class="bb4-l-each">
          <div class="bb4-le-sup bb4-le-sup2">正点率</div>
          <div class="bb4-le-sub bb4-le-sub2">
            <div class="bb4-leb-light"></div>
            <div class="bb4-leb-tri"></div>
            <div class="bb4-leb-word">
              <p>{{ totalObject.ontimerate }}%</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 折线 -->
    <div class="floorage-area">
      <div class="title-row">
        <div class="name">业务办理趋势(近6个月)</div>
        <div class="right">单位：件</div>
      </div>
      <div class="floorage-tabs">
        <ul class="item1">
          <li class="icon1"></li>
          <li class="label">受理量</li>
        </ul>
        <ul class="item2">
          <li class="icon1"></li>
          <li class="label">办结量</li>
        </ul>
      </div>

      <div class="floorage-echart" id="floorage"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import * as echarts from 'echarts'
import { CockpitApi } from '@/api/cockpit'

@Component({
  name: 'Item1',
  components: {}
})
export default class Item1 extends Vue {
  private totalObject = {
    acceptnum: '',
    finishnum: '',
    finishrate: '',
    ontimerate: ''
  }
  private list1 = [176, 279, 236, 213, 186, 289]
  private list2 = [182, 261, 279, 243, 151, 297]
  private monthList = ['2021.10', '2021.11', '2021.12', '2022.1', '2022.2', '2022.3']

  initFloorage() {
    const myChart = echarts.init(document.getElementById('floorage') as HTMLElement)
    myChart.setOption({
      color: ['#8a48f0', '#23d6d7'],
      tooltip: {
        trigger: 'axis'
      },
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: this.monthList,
        boundaryGap: false, // 从y轴开始
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },

        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#00eaff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#1c3a73'],
            width: 1,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177'
            // width: 1 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          name: '受理量',
          data: this.list1,
          type: 'line',
          // stack: 'Total',
          smooth: true
        },
        {
          name: '办结量',
          data: this.list2,
          type: 'line',
          // stack: 'Total'
          smooth: true
        }
      ]
    })
  }
  created() {
    this.init()
    this.initList2()
  }
  init() {
    CockpitApi.countHandleApi().then(res => {
      this.totalObject = res.data && res.data[0]
    })
  }
  initList2() {
    CockpitApi.countTrendApi().then(res => {
      this.monthList =
        res.data &&
        res.data.map((q: any) => {
          return q.yeartime
        })
      this.list1 =
        res.data &&
        res.data.map((q: any) => {
          return q.acceptnum
        })
      this.list2 =
        res.data &&
        res.data.map((q: any) => {
          return q.finishnum
        })
      this.initFloorage()
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl1-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 8px;
  background: url('~@/assets/cockpit/subdivision/approve/item1-bg.png') no-repeat 0/ 100% 100%;
}
.co-title-select {
  ::v-deep .el-input__inner {
    width: 172px;
    height: 28px;
    background: url('~@/assets/cockpit/co-title-select.png') no-repeat 0/ 100% 100%;
    border: none;
    font-size: 12px !important;
    color: #fff;
  }
  ::v-deep .el-input--small .el-input__icon {
    background: url('~@/assets/cockpit/co-title-select-tri.png') no-repeat 0/ 100% 100%;
    line-height: 28px;
    &::before {
      display: none;
    }
  }
}
.bz-title {
  .left {
    display: flex;
    .icon {
      display: flex;
      margin-left: 6px;
      .yellow-icon {
        width: 7px;
        height: 7px;
        margin-top: 6px;
        margin-right: -2px;
        display: block;
        background: #f9f0d4;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #f0b04a;
        transform: rotate(45deg);
      }
      img {
        height: 26px;
        display: block;
        margin-top: -3px;
      }
    }
    .name {
      color: #fff;
      text-shadow: 0 0 4px #006aff;
      font-size: 16px !important;
    }
  }
}
//
.bb4-main {
  width: 100%;
  position: relative;
  z-index: 1;
}

.bb4-list {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 20px;
  .bb4-l-each {
    flex: 1;
    position: relative;
    .bb4-le-sup {
      background: url('~@/assets/cockpit/subdivision/approve/apro-text-bg.png') no-repeat 0/ 100% 100%;
      margin-bottom: 26px;
    }
    .bb4-le-sup1 {
      width: 100%;
      height: 22px;
      font-size: 12px !important;
      line-height: 22px;
      color: #dffeff;
      text-align: center;
      margin-top: 7px;
    }
    .bb4-le-sup2 {
      width: 100%;
      height: 22px;
      font-size: 12px !important;
      line-height: 22px;
      color: #dffeff;
      text-align: center;
      margin-top: 7px;
    }
    .bb4-le-sub {
      width: 94px;
      height: 114px;
      position: relative;
      margin: 0 auto;
      .bb4-leb-light {
        width: 142px;
        height: 98px;
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 5;
        animation: bbLight ease 2s infinite;
      }
      .bb4-leb-tri {
        width: 20px;
        height: 10px;
        background: url('~@/assets/cockpit/bb4-leb-tri.png') no-repeat 0/ 100% 100%;
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 5;
        animation: bbTri ease 2s infinite;
      }

      .bb4-leb-word {
        width: 100%;
        position: absolute;
        left: 0;
        top: 44px;
        z-index: 10;
        > p {
          font-size: 22px !important;
          text-align: center;
          color: #fff;
          text-shadow: 0 0 4px #fff;
        }
        > h6 {
          font-size: 12px;
          text-align: center;
          color: #fff;
          margin-top: 4px;
        }
      }
    }
    .bb4-le-sub1 {
      background: url('~@/assets/cockpit/bb4-le-sub1.png') no-repeat 0/ 100% 100%;
      .bb4-leb-light {
        background: url('~@/assets/cockpit/bb4-leb-light1.png') no-repeat 0/ 100% 100%;
      }
    }
    .bb4-le-sub2 {
      background: url('~@/assets/cockpit/bb4-le-sub2.png') no-repeat 0/ 100% 100%;
      .bb4-leb-light {
        background: url('~@/assets/cockpit/bb4-leb-light2.png') no-repeat 0/ 100% 100%;
      }
    }
    .bb4-le-sub3 {
      background: url('~@/assets/cockpit/bb4-le-sub3.png') no-repeat 0/ 100% 100%;
      .bb4-leb-light {
        background: url('~@/assets/cockpit/bb4-leb-light3.png') no-repeat 0/ 100% 100%;
      }
    }
  }
}
@keyframes bbLight {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bbTri {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -5px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
// 折线
// 建筑面积
.floorage-area {
  width: 100%;
  height: 511px;
  .title-row {
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
    .right {
      font-size: 12px !important;
      color: #dffeff;
      margin-top: 6px;
    }
    .name {
      font-size: 14px !important;
      color: #dffeff;
      margin-top: 6px;
    }
  }
  .floorage-tabs {
    display: flex;
    color: #dffeff;
    width: 156px;
    margin: auto;
    margin-bottom: 20px;
    .item1 {
      display: flex;
      .icon1 {
        width: 7px;
        height: 7px;
        margin-top: 5px;
        margin-right: -2px;
        display: block;
        background: #9a4aff;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #9a4aff;
        transform: rotate(45deg);
      }
      .label {
        margin-left: 10px;
      }
    }
    .item2 {
      display: flex;
      margin-left: 36px;
      .icon1 {
        width: 7px;
        height: 7px;
        margin-top: 5px;
        margin-right: -2px;
        display: block;
        background: #23dad8;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #23dad8;
        transform: rotate(45deg);
      }
      .label {
        margin-left: 10px;
      }
    }
  }
  .floorage-echart {
    width: 100%;
    height: 68%;
  }
}
</style>
